<template>
  <div class="user-info-page">
    <div class="oj-user-info oj-user-info-page">
      <div class="oj-user-info-body">
        <el-form :model="userDetailForm" :rules="rules" ref="userFormRef" label-position="top" status-icon label-width="100px" class="demo-ruleForm">
          <div class="oj-user-info-subtitle-box">
            <div class="oj-user-info-subtitle">
              <span class="oj-user-info-dot">
                基本信息
              </span>
              <div class="opt-box">
                <el-button class="user-info-edit" v-if="currentState === 'normal'" type="primary" text @click="changeState('updating')">
                  <el-icon><Edit /></el-icon> 编辑
                </el-button>
                <el-button class="user-info-edit" v-if="currentState === 'updating'" type="info" text @click="changeState('normal')">
                  <el-icon><Close /></el-icon> 取消
                </el-button>
                <el-button class="user-info-back" type="info" text @click="goBack()">
                  <el-icon><Back /></el-icon> 返回
                </el-button>
              </div>
            </div>
          </div>
          
          <div class="ku-user-section" v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(255, 255, 255, 0.9)">
            <el-form-item prop="nickName">
              <div class="photo-image-box">
                <div class="photo-image">
                  <div class="left">
                    <el-avatar :size="100" v-if="!userDetailForm.headImage" src="@/assets/user/head_image.png"></el-avatar>
                    <el-avatar :size="100" v-else :src="userDetailForm.headImage" class="avatar-transition"></el-avatar>
                  </div>
                  <div class="right" v-if="!userDetailForm.headImage">
                    <div class="bold">上传你的个人头像</div>
                    <div class="normal">上传你的个性头像展示你的个人风格</div>
                  </div>
                </div>
                <div v-if="currentState === 'updating'" class="upload-btn-container">
                  <el-upload :action="uploadUrl" :headers="headers"
                    :on-error="handleUploadError" :on-success="handleUploadSuccess" :show-file-list="false">
                    <el-button type="primary" :loading="uploading">{{ userDetailForm.headImage ? '更换头像' : '上传头像' }}</el-button>
                    <template #tip> </template>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            
            <div class="form-grid">
              <el-form-item label="昵称" prop="nickName">
                <el-input v-if="currentState === 'updating'" type="text" v-model="userDetailForm.nickName" autocomplete="off"
                  placeholder="请填写您的昵称" maxlength="8">
                  <template #prefix><el-icon><User /></el-icon></template>
                </el-input>
                <div class="info-display" v-else>
                  <el-icon><User /></el-icon>
                  <span :class="userDetailForm.nickName ? 'right-info' : 'right-info gray'">
                    {{ userDetailForm.nickName || "请填写您的昵称" }}
                  </span>
                </div>
              </el-form-item>
              
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-if="currentState === 'updating'" v-model="userDetailForm.sex" class="gender-radio-group">
                  <el-radio :label="1" class="gender-radio">
                    <el-icon><Male /></el-icon>
                    <span>男</span>
                  </el-radio>
                  <el-radio :label="2" class="gender-radio">
                    <el-icon><Female /></el-icon>
                    <span>女</span>
                  </el-radio>
                  <el-radio :label="0" class="gender-radio">
                    <el-icon><User /></el-icon>
                    <span>未知</span>
                  </el-radio>
                </el-radio-group>
                <div class="info-display gender-display" v-else>
                  <el-icon><Male v-if="userDetailForm.sex == 1" /><Female v-else-if="userDetailForm.sex == 2" /><User v-else /></el-icon>
                  <span class="gender-text">
                    {{ userDetailForm.sex == null || userDetailForm.sex == 0 ? "未知" : +userDetailForm.sex == 1 ? "男" : "女" }}
                  </span>
                </div>
              </el-form-item>
              
              <el-form-item label="学校" prop="schoolName">
                <el-input v-if="currentState === 'updating'" type="text" v-model="userDetailForm.schoolName" autocomplete="off"
                  placeholder="请填写您的学校名称">
                  <template #prefix><el-icon><School /></el-icon></template>
                </el-input>
                <div class="info-display" v-else>
                  <el-icon><School /></el-icon>
                  <span :class="userDetailForm.schoolName ? 'right-info' : 'right-info gray'">
                    {{ userDetailForm.schoolName || "请填写您的学校名称" }}
                  </span>
                </div>
              </el-form-item>
              
              <el-form-item label="专业" prop="majorName">
                <el-input v-if="currentState === 'updating'" type="text" v-model="userDetailForm.majorName" autocomplete="off"
                  placeholder="请填写您的专业名称">
                  <template #prefix><el-icon><Reading /></el-icon></template>
                </el-input>
                <div class="info-display" v-else>
                  <el-icon><Reading /></el-icon>
                  <span :class="userDetailForm.majorName ? 'right-info' : 'right-info gray'">
                    {{ userDetailForm.majorName || "请填写您的专业名称" }}
                  </span>
                </div>
              </el-form-item>
              
              <el-form-item label="手机" prop="phone">
                <el-input v-if="currentState === 'updating'" type="text" v-model="userDetailForm.phone" autocomplete="off"
                  placeholder="请填写常用手机号">
                  <template #prefix><el-icon><Phone /></el-icon></template>
                </el-input>
                <div class="info-display" v-else>
                  <el-icon><Phone /></el-icon>
                  <span :class="userDetailForm.phone ? 'right-info' : 'right-info gray'">
                    {{ userDetailForm.phone || "请填写常用手机号" }}
                  </span>
                </div>
              </el-form-item>
              
              <el-form-item label="常用邮箱" prop="email">
                <el-input v-if="currentState === 'updating'" type="text" v-model="userDetailForm.email" autocomplete="off"
                  placeholder="请填写常用邮箱">
                  <template #prefix><el-icon><Message /></el-icon></template>
                </el-input>
                <div class="info-display" v-else>
                  <el-icon><Message /></el-icon>
                  <span :class="userDetailForm.email ? 'right-info' : 'right-info gray'">
                    {{ userDetailForm.email || "请填写常用邮箱" }}
                  </span>
                </div>
              </el-form-item>
              
              <el-form-item label="微信号码" prop="wechat">
                <el-input v-if="currentState === 'updating'" type="text" v-model="userDetailForm.wechat" autocomplete="off"
                  placeholder="请填写微信号码">
                  <template #prefix><el-icon><ChatDotRound /></el-icon></template>
                </el-input>
                <div class="info-display" v-else>
                  <el-icon><ChatDotRound /></el-icon>
                  <span :class="userDetailForm.wechat ? 'right-info' : 'right-info gray'">
                    {{ userDetailForm.wechat || "请填写微信号" }}
                  </span>
                </div>
              </el-form-item>
            </div>

            <el-form-item label="个人介绍" prop="introduce">
              <el-input v-if="currentState === 'updating'" :rows="5" type="textarea" v-model="userDetailForm.introduce"
                autocomplete="off" placeholder="请填写个人介绍" maxlength="80" show-word-limit></el-input>
              <div class="info-display intro-display" v-else>
                <el-icon><Document /></el-icon>
                <span :class="userDetailForm.introduce ? 'right-info intro' : 'right-info intro gray'">
                  {{ userDetailForm.introduce || "请用一段话介绍自己,该简介将会在您的个人主页展示" }}
                </span>
              </div>
            </el-form-item>
          </div>
          
          <div class="ku-login-footer" v-if="currentState === 'updating'">
            <el-button class="ku-login-footer-btn" type="info" plain @click="changeState('normal')">取消</el-button>
            <el-button class="ku-login-footer-btn blue" type="primary" @click="editUser()">保存</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getUserDetailService, editUserService, updateHeadImageService } from '@/apis/user'
import { getToken } from '@/utils/cookie'
import router from '@/router'
import { ElMessage } from 'element-plus'
import { reactive, ref } from "vue"
import { Edit, Close, Back, User, Male, Female, School, Reading, Phone, Message, ChatDotRound, Document } from '@element-plus/icons-vue'

const userFormRef = ref(null)
const loading = ref(false)
const uploading = ref(false)
const userDetailForm = reactive({
  nickName: '',
  sex: 0,
  schoolName: '',
  majorName: '',
  phone: '',
  email: '',
  wechat: '',
  introduce: '',
  headImage: ''
})

// 表单验证规则
const rules = {
  nickName: [
    { min: 2, max: 8, message: '昵称长度在2到8个字符之间', trigger: 'blur' }
  ],
  sex: [],
  schoolName: [],
  majorName: [],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  wechat: [],
  introduce: [
    { max: 80, message: '个人介绍不能超过80个字符', trigger: 'blur' }
  ]
}

const currentState = ref('normal')

async function getUserDetail() {
  loading.value = true
  try {
    const userRef = await getUserDetailService()
    currentState.value = "normal"
    Object.assign(userDetailForm, {
      nickName: userRef.data.nickName || '',
      sex: userRef.data.sex || 0,
      schoolName: userRef.data.schoolName || '',
      majorName: userRef.data.majorName || '',
      phone: userRef.data.phone || '',
      email: userRef.data.email || '',
      wechat: userRef.data.wechat || '',
      introduce: userDetailForm.introduce || '',
      headImage: userRef.data.headImage || ''
    })
  } catch (error) {
    console.error('获取用户信息失败：', error)
    ElMessage.error('获取用户信息失败')
  } finally {
    loading.value = false
  }
}
getUserDetail()

function goBack() {
  router.go(-1)
}

function changeState(state) {
  currentState.value = state
  if (state === 'normal') {
    // 重置表单
    userFormRef.value?.resetFields()
    getUserDetail()
  }
}

async function editUser() {
  if (!userFormRef.value) return
  
  try {
    await userFormRef.value.validate()
    
    // 构建请求参数
    const requestData = {
      nickName: userDetailForm.nickName || '',
      sex: userDetailForm.sex || 0,
      schoolName: userDetailForm.schoolName || '',
      majorName: userDetailForm.majorName || '',
      phone: userDetailForm.phone || '',
      email: userDetailForm.email || '',
      wechat: userDetailForm.wechat || '',
      introduce: userDetailForm.introduce || ''
    }
    
    console.log('准备发送到后端的数据：', requestData)
    
    // 发送PUT请求到/user/edit
    const res = await editUserService(requestData)
    console.log('后端返回结果：', res)
    
    if (res.code === 1000) {
      ElMessage.success('保存成功')
      await getUserDetail()
      changeState('normal')
    } else {
      ElMessage.error(res.msg || '保存失败')
    }
  } catch (error) {
    console.error('保存用户信息失败：', error)
    if (error?.message) {
      ElMessage.error(error.message)
    } else {
      ElMessage.error('保存失败，请重试')
    }
  }
}
//http://127.0.0.1:19090/friend/file/upload
const uploadUrl = ref("/dev-api/file/upload")

const headers = ref({
  Authorization: "Bearer " + getToken(),
})

async function handleUploadSuccess(res) {
  if (res.code !== 1000) {
    ElMessage.error(res.msg)
  } else {
    uploading.value = true
    try {
      const userUpdateDTO = reactive({
        headImage: res.data.name
      })
      await updateHeadImageService(userUpdateDTO)
      ElMessage.success("头像上传成功")
      // 重新获取用户详情
      await getUserDetail()
    } finally {
      uploading.value = false
    }
  }
}

function goQuestTest(questionId) {
  router.push(`/c-oj/anwser?questionId=${questionId}`)
}

</script>

<style lang="scss" scoped>
.back-btn-box {
  background: #fff;
  width: 100%;
  height: 48px;
  margin-bottom: 16px;

  .back-btn {
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
    line-height: unset;

    i {
      margin-right: 6px;
      font-size: 16px;
      margin-top: 2.5px;
    }
  }
}

.user-info-page {
  background-color: rgba(247, 247, 247, 1);
  position: relative;
  overflow: hidden;

  :deep(.el-form) {
    .el-button--info {
      background: #f2f3f5;
      border: 1px solid #f2f3f5;
      color: #222;

      &:hover {
        background: #32C5FF;
        border: 1px solid #32C5FF;
        color: #fff;
      }
    }

    .el-form-item {
      max-width: 1120px;
      width: 100%;

      .el-form-item__label {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: #222222;
        margin-bottom: 16px;
      }

      .photo-image-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-bottom: 20px;
        border-bottom: 1px solid #ebebeb;

        .photo-image {
          display: flex;
          flex: 1;
          margin-right: 20px;

          img {
            border-radius: 50%;
          }

          .right {
            flex: 1;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .bold {
              height: 25px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 18px;
              color: #222222;
              line-height: 25px;
              margin-bottom: 10px;
            }

            .normal {
              height: 22px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #999999;
              line-height: 22px;
            }
          }
        }
      }

      .el-input,
      .el-select,
      .el-radio-group {
        width: 100%;
        height: 44px;
        border-radius: 4px;
        outline-style: none;
        border: none;
        font-size: 16px;

        input {
          color: #222;
        }
      }

      .el-radio-group {

        border-bottom: 1px solid #ebebeb;
      }

      .el-input__wrapper {
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding-left: 0;
        color: #222;
        border-bottom: 1px solid #ebebeb;

        &:hover {
          border-bottom: 1px solid #32c5ff;
        }
      }
    }
  }

  .oj-user-info {
    margin: 0 auto;
    max-width: 1520px;
    width: 100%;

    &.oj-user-info-page {
      background: #f7f7f7;
      margin-bottom: 30px;

      .user-info-back {
        cursor: pointer;
        color: #999999;
        font-size: 15px;
      }

      .user-info-edit {
        cursor: pointer;
        font-size: 15px;
        margin-left: auto;
      }

      .ku-user-section {
        background: #fff;
      }

      .oj-user-info-body {
        padding: 0;

        .oj-user-info-subtitle-box {
          padding: 30px 20px;
          padding-bottom: 0;

          .oj-user-info-subtitle {
            display: flex;
            align-items: center;
            height: 33px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 24px;
            color: #222222;
            line-height: 33px;
          }
        }
      }

      .ku-user-section {
        padding: 30px 24px;
        padding-bottom: 0;
      }

      .ku-user-real-info {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 24px;
        box-sizing: border-box;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #f2f2f2;
      }

      .el-form-item__content {
        margin-left: 110px;
      }

      .ku-login-footer {
        text-align: left;
        padding-left: 24px;
        padding-bottom: 24px;
      }
    }

    .oj-user-info-title {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 10px;
      width: 100%;
      /* 设置宽度为100%以确保水平居中 */
      height: 60px;
      font-size: 25px;
      text-indent: 20px;
      display: flex;
      align-items: center;
      margin: 20px 0 20px 0;
    }

    .oj-user-info-body {
      background-color: #fff;
      padding: 20px 20px 40px;
      border-radius: 8px;
    }

    .oj-user-info-subtitle {
      font-size: 16px;
      font-weight: 500;
      color: #222222;
      line-height: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .ku-login-footer {
      text-align: center;
      margin-top: 30px;
    }

    .ku-login-footer-btn {
      width: 84px;
      height: 44px;
      border-radius: 3px;
      font-size: 15px;
      font-weight: 400;

      &.blue {
        background: #32C5FF !important;
        color: #fff;
      }
    }

    .ku-user-section {
      background-color: #f7f7f7;
      padding: 30px 38px;
      border-radius: 10px;
    }

    .oj-user-info-action {
      position: relative;
      height: 0;
    }

    .ku-user-validate-phone {
      display: inline-block;
      height: 40px;
      margin-left: 8px;
      color: #24c68b;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
    }

    .ku-user-real-info {
      margin-top: 47px;
    }
  }
}

.avatar-transition {
  transition: all 0.3s ease-in-out;
  
  &:hover {
    transform: scale(1.05);
  }
}

.ku-user-section {
  transition: all 0.3s ease-in-out;
  
  &.is-loading {
    opacity: 0.7;
  }
}

// 添加淡入淡出动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.oj-user-info-body {
  animation: fadeIn 0.3s ease-in-out;
}

// 优化加载状态样式
:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
}

:deep(.el-loading-spinner) {
  .el-loading-text {
    color: #32C5FF;
    font-size: 14px;
    margin-top: 8px;
  }
  
  .circular {
    width: 30px;
    height: 30px;
    animation: loading-rotate 2s linear infinite;
  }
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}
</style>

<style lang="scss">
.oj-user-info-page {
  .el-form-item__label {
    padding-right: 30px !important;
    color: #666;
  }

  .el-form {
    padding-bottom: 24px;
  }

  .right-info {
    display: inline-block;
    min-width: 90px;
    color: #222;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    width: 100%;
    border-bottom: 1px solid #f2f2f2;
    height: 44px;
    line-height: 44px;

    &.gray {
      color: #999;
      position: relative;
      
      // 移除悬停时显示"点击编辑"的提示
      &::after {
        content: '';
      }
    }
  }
  
  // 突出显示编辑按钮
  .user-info-edit {
    background-color: #f0f9ff;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s;
    position: relative;
    
    &:hover {
      background-color: #e6f7ff;
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    &::after {
      content: '点击此处编辑';
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      color: #32C5FF;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    &:hover::after {
      opacity: 1;
    }
  }
  
  // 优化输入框样式
  .el-input__wrapper {
    padding: 0 15px 0 40px !important; // 增加左侧内边距，为图标留出空间
    border-radius: 6px !important;
    border: 1px solid #dcdfe6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    
    &:hover, &:focus-within {
      border-color: #32C5FF !important;
      box-shadow: 0 0 0 1px rgba(50, 197, 255, 0.2) !important;
    }
    
    .el-input__inner {
      height: 42px;
    }
    
    .el-input__prefix {
      left: 12px; // 调整图标位置
      color: #909399;
    }
  }
  
  // 优化文本域样式
  .el-textarea__inner {
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    padding: 10px 15px;
    
    &:hover, &:focus {
      border-color: #32C5FF;
    }
  }
  
  // 优化信息显示区域
  .info-display {
    padding: 10px 15px 10px 40px !important; // 增加左侧内边距，为图标留出空间
    position: relative;
    
    .el-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #909399;
    }
    
    &.intro-display .el-icon {
      top: 15px;
      transform: none;
    }
  }

  // 添加性别选择框样式
  .gender-radio-group {
    display: flex;
    gap: 20px;
    padding: 8px 0;
    
    .gender-radio {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 16px;
      border-radius: 6px;
      transition: all 0.3s ease;
      border: 1px solid #dcdfe6;
      background-color: #fff;
      height: 44px;
      
      .el-icon {
        font-size: 14px;
        color: #909399;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        line-height: 14px;
        margin: 0;
        padding: 0;
        vertical-align: middle;
      }
      
      span {
        font-size: 14px;
        color: #606266;
        line-height: 14px;
        height: 14px;
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 0;
        vertical-align: middle;
      }
      
      &:hover {
        border-color: #32C5FF;
        background-color: #f0f9ff;
      }
      
      &.is-checked {
        border-color: #32C5FF;
        background-color: #f0f9ff;
        
        .el-icon {
          color: #32C5FF;
        }
        
        span {
          color: #32C5FF;
        }
      }
    }
  }
  
  // 优化性别显示样式
  .info-display {
    display: flex;
    align-items: center;
    height: 44px;
    
    .el-icon {
      font-size: 14px;
      color: #909399;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      line-height: 14px;
      margin: 0;
      padding: 0;
      vertical-align: middle;
    }
    
    .right-info {
      font-size: 14px;
      line-height: 14px;
      height: 14px;
      display: inline-flex;
      align-items: center;
      margin: 0;
      padding: 0;
      vertical-align: middle;
    }
  }

  // 统一输入框和显示框的样式
  .el-input__wrapper,
  .info-display {
    height: 44px;
    line-height: 44px;
    padding: 0 15px 0 40px !important;
    border-radius: 6px !important;
    border: 1px solid #dcdfe6 !important;
    background-color: #fff;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #32C5FF !important;
    }
    
    .el-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #909399;
    }
  }
  
  // 统一文本域样式
  .el-textarea__inner,
  .info-display.intro-display {
    min-height: 120px;
    padding: 12px 15px 12px 40px !important;
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    background-color: #fff;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #32C5FF;
    }
    
    .el-icon {
      position: absolute;
      left: 12px;
      top: 15px;
      transform: none;
      font-size: 18px;
      color: #909399;
    }
  }
  
  // 统一显示文本样式
  .right-info {
    display: inline-block;
    width: 100%;
    color: #606266;
    font-size: 14px;
    line-height: 44px;
    
    &.gray {
      color: #909399;
    }
    
    &.intro {
      line-height: 1.5;
      padding: 8px 0;
    }
  }
  
  // 性别选择框样式
  .gender-radio-group {
    display: flex;
    gap: 20px;
    padding: 8px 0;
    
    .gender-radio {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 6px;
      transition: all 0.3s ease;
      border: 1px solid #dcdfe6;
      background-color: #fff;
      
      &:hover {
        border-color: #32C5FF;
        background-color: #f0f9ff;
      }
      
      .el-icon {
        font-size: 18px;
        color: #909399;
      }
      
      span {
        font-size: 14px;
        color: #606266;
      }
      
      &.is-checked {
        border-color: #32C5FF;
        background-color: #f0f9ff;
        
        .el-icon {
          color: #32C5FF;
        }
        
        span {
          color: #32C5FF;
        }
      }
    }
  }
  
  // 统一表单项样式
  .el-form-item {
    margin-bottom: 24px;
    
    .el-form-item__label {
      font-size: 14px;
      color: #606266;
      margin-bottom: 8px;
    }
  }

  // 添加全局过渡动画
  .el-input__wrapper,
  .info-display,
  .el-textarea__inner,
  .gender-radio-group,
  .gender-radio {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  // 优化输入框过渡效果
  .el-input__wrapper {
    transform-origin: center;
    opacity: 1;
    transform: scale(1);
    
    &:hover {
      transform: scale(1.01);
    }
  }

  // 优化信息显示区域过渡效果
  .info-display {
    transform-origin: center;
    opacity: 1;
    transform: scale(1);
    
    &:hover {
      transform: scale(1.01);
      background-color: #f8f9fa;
    }
  }

  // 优化文本域过渡效果
  .el-textarea__inner {
    transform-origin: center;
    opacity: 1;
    transform: scale(1);
    
    &:hover {
      transform: scale(1.01);
    }
  }

  // 优化性别选择框过渡效果
  .gender-radio-group {
    .gender-radio {
      transform-origin: center;
      opacity: 1;
      transform: scale(1);
      
      &:hover {
        transform: scale(1.05);
      }
      
      &.is-checked {
        transform: scale(1.05);
      }
    }
  }

  // 添加编辑按钮过渡效果
  .user-info-edit {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    
    &:hover {
      transform: translateY(-2px) scale(1.05);
    }
  }

  // 添加保存和取消按钮过渡效果
  .ku-login-footer-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    
    &:hover {
      transform: translateY(-2px) scale(1.05);
    }
  }

  // 优化头像上传区域过渡效果
  .photo-image-box {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    .upload-btn-container {
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    &:hover {
      .upload-btn-container {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  // 添加表单整体过渡效果
  .el-form {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  // 优化表单项标签过渡效果
  .el-form-item__label {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      color: #32C5FF;
    }
  }

  // 添加图标过渡效果
  .el-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  // 优化输入框图标过渡效果
  .el-input__prefix {
    .el-icon {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  .el-input__wrapper:hover .el-input__prefix .el-icon {
    color: #32C5FF;
    transform: scale(1.1);
  }

  // 优化信息显示区域图标过渡效果
  .info-display:hover .el-icon {
    color: #32C5FF;
    transform: scale(1.1) translateY(-50%);
  }

  // 优化文本域图标过渡效果
  .intro-display:hover .el-icon {
    color: #32C5FF;
    transform: scale(1.1);
  }

  // 优化信息显示区域样式
  .info-display {
    padding: 0 15px !important;
    position: relative;
    border: none !important;
    background: transparent !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      transform: none;
      background: transparent !important;
    }
    
    .el-icon {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      color: #909399;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    &.intro-display {
      padding: 0 !important;
      
      .el-icon {
        top: 0;
        transform: none;
      }
    }
  }

  // 优化显示文本样式
  .right-info {
    display: inline-block;
    width: 100%;
    color: #606266;
    font-size: 14px;
    line-height: 44px;
    padding-left: 28px;
    border: none !important;
    
    &.gray {
      color: #909399;
    }
    
    &.intro {
      line-height: 1.5;
      padding: 8px 0 8px 28px;
    }
  }

  // 优化性别显示样式
  .info-display {
    .el-icon {
      font-size: 16px;
      color: #909399;
    }
    
    .right-info {
      font-size: 14px;
      color: #606266;
      
      &.gray {
        color: #909399;
      }
    }
  }

  // 移除未编辑状态下的选择框样式
  .info-display {
    &:hover {
      border: none !important;
      box-shadow: none !important;
    }
  }

  // 优化编辑状态下的输入框样式
  .el-input__wrapper {
    border: 1px solid #dcdfe6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    
    &:hover {
      border-color: #32C5FF !important;
      box-shadow: 0 0 0 1px rgba(50, 197, 255, 0.2) !important;
    }
  }

  // 优化编辑状态下的文本域样式
  .el-textarea__inner {
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    
    &:hover {
      border-color: #32C5FF;
      box-shadow: 0 0 0 1px rgba(50, 197, 255, 0.2);
    }
  }

  // 优化编辑状态下的性别选择框样式
  .gender-radio-group {
    .gender-radio {
      border: 1px solid #dcdfe6;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      
      &:hover {
        border-color: #32C5FF;
        box-shadow: 0 0 0 1px rgba(50, 197, 255, 0.2);
      }
    }
  }

  // 优化个人介绍显示样式
  .info-display.intro-display {
    padding: 0 15px !important;
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    
    .el-icon {
      position: absolute;
      left: 0;
      top: 12px;
      transform: none;
    }
    
    .right-info.intro {
      padding-left: 28px;
      line-height: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
    }
  }

  // 优化个人介绍文本域样式
  .el-textarea__inner {
    min-height: 44px;
    line-height: 44px;
    padding: 0 15px 0 40px !important;
    
    &::placeholder {
      line-height: 44px;
    }
  }

  // 统一所有字段的图标位置
  .info-display {
    .el-icon {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: #909399;
    }
  }

  // 修复 Element Plus 单选框的默认样式
  :deep(.el-radio) {
    margin-right: 0;
    height: 44px;
    display: inline-flex;
    align-items: center;
    
    .el-radio__input {
      display: none;
    }
    
    .el-radio__label {
      padding: 0;
      display: inline-flex;
      align-items: center;
      height: 14px;
      line-height: 14px;
    }
  }
}

.gender-display {
  display: flex;
  align-items: center;
  padding: 0 15px !important;
  height: 44px;
  border: none !important;
  background: transparent !important;
  
  .el-icon {
    font-size: 16px;
    color: #32C5FF;
    margin-right: 8px;
  }
  
  .gender-text {
    font-size: 14px;
    color: #606266;
    line-height: 1;
  }
}

.info-display.gender-display {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  
  &:hover {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  
  .el-icon {
    color: #32C5FF;
  }
}
</style>